<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>报名中心</title>
  <link rel="stylesheet" href="./CSS/application.css">
  <style>
    .mask{
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.5);
    }
    .addTeam{

      width: 400px;
      height: 600px;
      background-color: white;

      position: absolute;
      top: 50%;
      left: 50%;

      transform: translate(-50%,-50%);

      box-sizing: border-box;
      padding: 20px 20px 20px 20px;
    }
    .addTeamTitle{
      width: 100%;
      height: 60px;
    }

    .line{
      width: 200px;
      height: 5px;
      background-color: skyblue;
      margin: 0 auto;
    }

    .addTitle{
      text-align: center;
      font-size: 25px;
    }

    .inputBox{
      width: 100%;
      height: 71px;
      margin-top: 40px;
    }

    .inputText{
      color: skyblue;
    }

    .fileBox{
      position: relative;
      width: 100px;
      height: 100px;
    }

    .file{
      height: 164px;
    }

    .closeMask{
      cursor: pointer;
      position: absolute;
      top: -12px;
      right: -12px;

      width: 30px;
      height: 30px;
      background-color: rgb(193, 192, 192);

      font-weight: bold;

      text-align: center;
      line-height: 30px;

      border-radius: 50px;
      color: white;
    }
  </style>
</head>

<body>

  <div id="app">
    <div class="mask" v-if="showMask" >
        <div class="addTeam">
          <div class="closeMask" @click="closeMask">X</div>
          <div class="addTeamTitle">
                <p class="addTitle">新增队伍</p>
                <p class="line"></p>

          <!--队名输入框-->
            <div class="inputBox">
              <p class="inputText">队伍名称</p>
              <input style="width: 100%;height: 42px;border: 1px solid skyblue; box-sizing: border-box;padding-left: 10px;" v-model="teamName">
            </div>

          <!--指导老师输入框-->
            <div class="inputBox">
              <p class="inputText">指导老师姓名</p>
              <input style="width: 100%;height: 42px;border: 1px solid skyblue; box-sizing: border-box;padding-left: 10px;" v-model="teamTeacher">
            </div>

            <div class="inputBox file">
              <p class="inputText">队伍头像</p>
              <div class="fileBox ">
                <input type="file" style="opacity: 0; position: absolute;top: 0;left: 0;" accept=".png,.jdp" @change="getImageUrl($event)">
                <img :src="showimageUrl" style="width: 100px;height: 100px;">
              </div>
            </div>

<!--            提交-->
            <button style="width: 100px;height: 36px;background-color: skyblue;border-radius:10px;color: white; " @click="submitTeamMsg">提交</button>
            <button style="width: 100px;height: 36px;background-color: white;border-radius:10px;margin-left: 10px;color: skyblue ">取消</button>


          </div>
        </div>
    </div>

    <div class="head">
      <div class="container" style="display: flex;align-items: center;justify-content: space-between;">
        <div class="logoBox">
          <div class="logoimage">
            <img src="./image/logo.png" style="width: 100%;height: 100%;">
          </div>
          <div class="logoText">
            <img src="./image/mynameLogo.png" style="width: 100%;height: 100%;">
          </div>

          <div class="backTocourse" @click="backToRace()">
            返回首页
          </div>
        </div>

        <div class="userBox">
          <div class="userImage">
            <img :src="userMsg.uurl" style="width: 100%;height: 100%;">
          </div>
          <div class="userName">
            {{userMsg.username}}
          </div>
        </div>
      </div>
    </div>

    <div class="body">
      <div class="container2">
        <p class="raceName">{{raceNAME}}</p>
        <div class="textBaoming"> 组队报名 </div>

        <div class="searchGroup">
          <input type="text" class="searchInput" v-model="searchTeamName">
          <button class="searchButton" @click="searchTeam">搜索</button>

          <div class="createTeam" @click="openMask">创建队伍</div>
        </div>


        <div class="teamTitle">
          <div class="title">队长</div>
          <div class="title">队名</div>
          <div class="title">参加项目</div>
          <div class="title">人数</div>
          <div class="title">操作</div>
        </div>


        <div class="teamTitle" v-for="(item,i) in teamList" :key="i">
          <div class="title leader">
            <img :src="item.team.turl" style="width: 30px;height: 30px;border-radius: 15px;">
            <p style="margin-left: 20px;width: 80px;  overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            /*控制在3行*/
            -webkit-line-clamp:1;
            -webkit-box-orient:vertical;">{{item.leader.username}}</p>
          </div>
          <div class="title groupName">{{item.team.tname}}</div>
          <div class="title joinRace">{{item.race.rname}}</div>
          <div class="title menberNum">{{item.teamUserCount}}/4</div>
          <div class="title join joined" v-if="item.team.tid == jionTeamID">已加入</div>
          <div class="title join" v-else @click="joinTeam(rid,item.team.tid,userMsg.uid)">申请加入</div>

        </div>

        <div style="text-align: center;color: silver;" v-if="!isFull">抱歉暂时没有任何参赛队伍</div>

        <div class="arrow" v-if="isFull">
          <button class="pageToLast" @click="toLastPage">上一页</button>
          <button class="pageToNext" @click="toNextPage">下一页</button>
          <p style="font-size: 12px;color: rgb(210, 208, 208);margin-left: 10px;">当前第{{nowPage}}页,共{{totlePage}}页</p>
        </div>
      </div>
    </div>
  </div>
  <div class="footer"></div>


  <script src="./JS/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      created() {
        this.userMsg = JSON.parse(sessionStorage.getItem("user"))
        // const rid  = location.search.charAt(location.search.length-1)
        const rid = this.getRid("raceid")

        this.rid = rid
        this.getList(rid,1,false)
      },
      data: {
        showMask:false,
        teamList: [],
        nowPage: 1,
        totlePage: 10,
        rid:0,
        userMsg:{},
        searchTeamName:'',
        ifBtnSearch:false,
        raceNAME:'',
        isFull:true,
        showimageUrl:'image/noimage.jpg',
        jionTeamID:-1,

        // 添加队伍信息
        teamName:'',
        teamTeacher:'',
        // 图片
        imageUpload:null,


      },
      methods: {
        getRid(name){
          var  reg =  new  RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
          var  r = window.location.search.substr(1).match(reg);
          if(r!=null)  return  unescape(r[2]);  return  null;
        },
        async submitTeamMsg(){
          console.log("teamName"+this.teamName)
          console.log("teamTeacher"+this.teamTeacher)
          console.log("iamegUpload"+this.imageUpload)

          if(this.teamName==""||this.teamTeacher==""||this.imageUpload==null){
            alert("请填写完整")
          }
          else {
            let teamUrl = ""
            const formdata = new FormData()
            formdata.append('files',this.imageUpload)

            // 上传图片返回路径
            await axios({
              method: 'post',
              url: '/Indenture/team/updateUrl',
              headers: {
                'Content-Type': 'multipart/form-data'
              },
              data: formdata
            }).then((res) => {
              console.log(res.data.url)
              // 添加队伍
              axios({
                method: 'post',
                url: '/Indenture/teamAdd',
                data: {
                  tname:this.teamName,
                  lid:this.userMsg.uid,
                  rid:this.rid,
                  teacherName:this.teamTeacher,
                  turl:res.data.url,
                  pass:1
                }
              }).then((res2) => {
                if(res2.data.statue=="0"){
                  alert(res2.data.Msg)
                }
                else {
                  alert("创建成功")
                  location.href="./race.html"
                }
              })


            })

          }
        },
        openMask(){
          this.showMask = true
          this.stopMove();
        },
        // 开启滚动
        Move(){
          let m =function(e){e.preventDefault();};
          document.body.style.overflow='';//出现滚动条
          document.removeEventListener("touchmove",m,{ passive:true });
        },
        stopMove(){
          let m = function(e){e.preventDefault();};
          document.body.style.overflow='hidden';
          document.addEventListener("touchmove",m,{ passive:false });//禁止页面滑动
        },
        closeMask(){
          this.showMask = false
          this.Move()
        },
        async getImageUrl($event){
            const file = event.target.files[0]
            const base64Str = await this.changeFileIntoBase64(file);
            this.showimageUrl = base64Str
            this.imageUpload = file
        },
        changeFileIntoBase64(file) {
          return new Promise((resolve, reject) => {
            const fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onload = (result) => {
              const base64Str = result.currentTarget.result;
              resolve(base64Str);
            };
          });
        },

        joinTeam(rid,tid,uid){
          if(this.userMsg.status==1){
            alert("老师不能参加")
            return
          }
          else {
            this.zuduijiekou(rid,uid,tid);
          }

        },
        async raceAlready(rid,uid,tid){
          // 判断是否在队伍里面
            await axios({
              method: 'post',
              url: '/Indenture/teamJudgeServlet',
             data: {
               rid:rid,
              uid:uid,
              tid:tid
             },
            }).then((res)=>{

              if(res.data.status==0){
                this.jionTeamID = tid
              }
             })
        },
        zuduijiekou(rid,uid,tid){
          axios({
            method: 'post',
            url: '/Indenture/teamUserAdd',
            data: {
              rid:rid,
              uid:uid,
              tid:tid
            }
          }).then((res) => {
            if(res.data.status=="0"||res.data.status==0){
              alert("只能加一个队伍")
            }

            else if(res.data.status=="1"||res.data.status==1){
              alert("组队已满")
            }
            else {
              alert("组队成功")
              location.href="./race.html"
            }
          })
        },
        // 获取队伍列表
        getList(rid,nowPage,issearch){
          console.log(rid)
          this.isFull = true
          // 搜索之后
          if(issearch){
            axios({
              method: 'post',
              url: '/Indenture/teamByRaceAndName',
              data: {
                rid: rid,
                tname:this.searchTeamName,
                pageIndex: this.nowPage
              }
            }).then((res) => {
              console.log(res)
              this.teamList = res.data.teamMsg
              this.totlePage = res.data.pageCount

              if(this.jionTeamID==-1){
                res.data.teamMsg.forEach((item)=>{
                  this.raceAlready(this.rid,this.userMsg.uid,item.team.tid)
                })
              }
              if(res.data.teamMsg.length==0){
                this.isFull = false
              }
            })
          }

          // 没有搜索
          else {
            axios({
              method: 'post',
              url: '/Indenture/teamListByRid',
              data: {
                rid: rid,
                pageIndex: nowPage
              }
            }).then((res) => {
              this.teamList = res.data.teamMsg
              this.totlePage = res.data.pageCount

              if(this.jionTeamID==-1){
                res.data.teamMsg.forEach((item)=>{
                  this.raceAlready(this.rid,this.userMsg.uid,item.team.tid)
                })
              }

              if(res.data.teamMsg.length==0){
                this.isFull = false
              }
              else if(this.raceNAME==''){
                this.raceNAME = res.data.teamMsg[0].race.rname
              }
            })
          }

        },
        // 搜索队名
        searchTeam(){
          if(this.searchTeamName!=""){

            this.nowPage=1
            this.ifBtnSearch = true
            // 按照名字搜索
            this.getList(this.rid,this.nowPage,true)
          }
        },
        backToRace(){
          location.href="./race.html"
        },


        toLastPage() {

          if (this.nowPage != 1) {
            this.nowPage--
            if(this.searchTeamName!=''&&this.ifBtnSearch){
              this.getList(this.rid,this.nowPage,true)
            }
            else {
              this.getList(this.rid,this.nowPage,false)
            }
          }
          else {
            alert("已经是第一页")
          }
        },
        toNextPage() {
          if (this.nowPage != this.totlePage) {
            this.nowPage++
            if(this.searchTeamName!=''&&this.ifBtnSearch){
              this.getList(this.rid,this.nowPage,true)
            }
            else {
              this.getList(this.rid,this.nowPage,false)
            }
          }

          else {
            alert("已经是最后一页")
          }

        }

      }
    })
  </script>
</body>

</html>